<template>
    <swiper :options="swiperOption" v-if="swiperlist.length>0">
        <!-- slides -->
        <swiper-slide v-for="(v,i) in swiperlist" :key="i">
            <img :src="v.imgUrl">
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
</template>

<script>
    import {
        swiper,
        swiperSlide
    } from 'vue-awesome-swiper'
    export default {
        name: 'banner',
        props:['swiperlist'],
        data() {
            return {
                swiperOption: {
                    autoplay: true,
                    loop:true,
                    pagination: {
                        el: '.swiper-pagination',
                    },
                }
            }
        },
        components: {
            swiper,
            swiperSlide
        }
    }
</script>

<style>
    .swiper-container {
        width: 100%;
        height: 238px;
    }
    .swiper-pagination-bullet{
        width: 17px;
        height: 17px;
    }
    .swiper-pagination-bullet-active{
        background: #fff;
    }
    .swiper-slide img{
        width: 100%;
    }
</style>